import React, { lazy, useEffect } from "react";
import { Navigate, useNavigate, useLocation } from "react-router-dom";
import Layout from '../page/Layout'
import Falsepage from "../page/Falsepage";
import Login from "../page/Login";
import Pending from "../page/Pending";
import TestLogin from "../page/TestLogin";
import { isLoggedIn, isRiderActive } from '../utils/auth';

// 路由守卫组件
const ProtectedRoute = ({ children, requiresAuth = false }) => {
    const navigate = useNavigate();
    const location = useLocation();

    useEffect(() => {
        // 如果不需要认证，直接渲染
        if (!requiresAuth) {
            return;
        }

        // 检查是否已登录
        if (!isLoggedIn()) {
            navigate('/login', { state: { from: location.pathname } });
            return;
        }

        // 检查骑手状态
        if (!isRiderActive()) {
            navigate('/pending');
            return;
        }
    }, [navigate, location, requiresAuth]);

    return children;
};

// 登录页面路由守卫
const LoginRoute = ({ children }) => {
    const navigate = useNavigate();

    useEffect(() => {
        // 如果已经登录且状态正常，直接跳转到首页
        if (isLoggedIn() && isRiderActive()) {
            navigate('/layout/home');
            return;
        }
    }, [navigate]);

    return children;
};

// 待审核页面路由守卫
const PendingRoute = ({ children }) => {
    const navigate = useNavigate();

    useEffect(() => {
        // 如果没有登录，跳转到登录页
        if (!isLoggedIn()) {
            navigate('/login');
            return;
        }

        // 如果状态正常，跳转到首页
        if (isRiderActive()) {
            navigate('/layout/home');
            return;
        }
    }, [navigate]);

    return children;
};

const Home = lazy(() => import('../page/Home'));
const My = lazy(() => import('../page/My'));
const Fenlei = lazy(() => import('../page/Fenlei'));
const Message = lazy(() => import('../page/Message'));

const routes = [
    {
        path: '/layout',
        element: <Layout />,
        children: [
            {
                path: '/layout/home', 
                element: (
                    <ProtectedRoute requiresAuth={true}>
                        <Home />
                    </ProtectedRoute>
                ), 
                meta: {
                    title: '首页',
                    requiresAuth: true
                }
            },
            {
                path: '/layout/fenlei', 
                element: (
                    <ProtectedRoute requiresAuth={true}>
                        <Fenlei />
                    </ProtectedRoute>
                ), 
                meta: {
                    title: '抢单',
                    requiresAuth: true
                }
            },
            {
                path: '/layout/message', 
                element: (
                    <ProtectedRoute requiresAuth={true}>
                        <Message />
                    </ProtectedRoute>
                ), 
                meta: {
                    title: '消息中心',
                    requiresAuth: true
                }
            },
            {
                path: '/layout/my', 
                element: (
                    <ProtectedRoute requiresAuth={true}>
                        <My />
                    </ProtectedRoute>
                ), 
                meta: {
                    title: '我的',
                    requiresAuth: true
                }
            },
        ],
    },
    {
        path: '/login',
        element: (
            <LoginRoute>
                <Login />
            </LoginRoute>
        )
    },
    {
        path: '/pending',
        element: (
            <PendingRoute>
                <Pending />
            </PendingRoute>
        )
    },
    {
        path: '/test-login',
        element: <TestLogin />
    },
    {
        path: '/',
        element: <Navigate to="/layout/home" />
    },
    {
        path: '*',
        element: <Falsepage />
    }
]

export default routes


